[Amazon Connect]「サードパーティアプリケーション」のワークショップをやってみた

[Amazon Connect]「サードパーティアプリケーション」のワークショップをやってみた

Amazon Connectの電話画面に埋め込める「サードパーティアプリケーション」機能のワークショップがあったので、早速やってみました
Clock Icon2024.03.29

こんにちは、洲崎です。
Amazon Connect Agent Workspaceで利用できる「サードパーティアプリケーション」機能のワークショップがあったので、やってみました。

サードパーティアプリケーション機能とは

サードパーティアプリケーションとは、Amazon Connect Agent WorkspaceにWebページや独自のアプリケーションを表示することができる機能です。
2024/3/26にGA(一般公開)され、誰でも利用できるようになりました。
詳細については、こちらの記事をご確認ください。

このサードパーティアプリケーションのワークショップがありましたので、早速やってみました。

ワークショップの前提

本ワークショップを行うにあたり、下記の作成が完了していることが前提となります。

  • AWSアカウントの作成
  • Amazon Connectインスタンスの作成
  • Amazon Connect ユーザーの作成

また、本ワークショップはAWS CloudFormationを利用しますが、以下のリソースが作成されます。

  • Amazon S3:Webサイトのコンテンツを保存する用
  • AWS Lambda:ウェブサイトのコンテンツをS3バケットにコピーするためのLambda関数
  • AWS CloudFront:ウェブページをホストし、インターネット経由でS3バケットのコンテンツにアクセスできるようにする用

やってみる

CloudFormationのデプロイ

ワークショップにあるCloudFormationテンプレートをローカルにダウンロードします。

AWSマネジメントコンソールから、CloudFormationのページにいき、スタックの作成で以下を選択します。

  • テンプレートの準備
    • テンプレートの準備完了
  • テンプレートの指定
    • テンプレートファイルのアップロード
    • ローカルにダウンロードしたyamlファイルをアップロードします


スタック名は任意の名前を入力します。(例:third-party-workshop)

スタックオプションの設定はデフォルトのままで次に進みます。

「AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。」にチェックをいれて、「送信」をクリックします。

5分ほど待つと、デプロイが完了します。ステータスが「CREATE_COMPLETE」になっていることを確認します。

出力タブにある「WebsiteURL」のCloudFrontのドメインを確認し、クリックします。

以下の画面がでることを確認します。

CloudFormationで作成されたリソースを見てみる

設定を進めていく前に、CloudFormationで作成されたリソースをざっと見てみました。

作成されたリソースは以下です。

  • Amazon S3
    • コンテンツ保存用のS3バケット
    • バケットポリシー
  • Lambda
    • CloudFormationのデプロイをトリガーとしたLambda トリガー
    • Webサイトのファイルをダウンロードし、S3バケットにアップロードするLambda関数
  • CloudFront
    • コンテンツ公開用のディストリビューション
    • OAI
  • IAM
    • Lambda用のIAMロール

Lambda関数は中身をざっと見ると、S3バケットにコンテンツを格納するのが目的で、スポット的な利用用途でした。
以下コードの抜粋です。

def download_from_cloudfront(cloudfront_url, object_key):
    try:
        cloudfront_url = cloudfront_url.rstrip('/')
        url = f"{cloudfront_url}/{object_key}"
        with urllib.request.urlopen(url) as response:
            return response.read()
    except Exception as e:
        logger.error(f"Error downloading {object_key} from CloudFront: {e}")
        raise

def upload_to_s3(s3_resource, destination_bucket, object_key, content, content_type):
    try:
        s3_object = s3_resource.Object(destination_bucket, object_key)
        s3_object.put(Body=content, ContentType=content_type)
    except Exception as e:
        logger.error(f"Error uploading {object_key} to S3: {e}")
        raise

今回のソリューションはS3バケットのコンテンツの中身がメインですね。
作成されたS3バケットを見ると、index.htmlを含めた複数のファイルが格納されていることを確認できます。
staticの中身をみると、cssjsにそれぞれ肝となるコードが格納されています。
より興味のある方は覗いてみてください。(Reactが使われていました)


サードパーティアプリケーションの設定

ワークショップの設定に戻ります。
Amazon Connectコンソールから、「サードパーティーのアプリケーション」を開き、「アプリケーションを追加」をクリックします。

Amazon Connectで利用するユーザーのセキュリティプロファイルで、「エージェントアプリケーション」の「MyFirstThirdPartyApp」のアクセスを許可します。

Amazon ConnectコンソールからAgent Workspaceを開きます。

右上にあるランチャーから「MyFirstThirdPartyApp」をクリックします。

すると、今ログインしているエージェントのARN、名前、ステータス、ルーティングプロファイル、対応できるチャネル(電話・チャット・タスク)の数が動的に取得され表示されました!

テスト

チャットのテスト機能で、動作を確認します。

テスト設定をクリックします。

テストで利用する問い合わせフローを指定、お客さまの名前を記載します。

下5つの項目も含めて、動的に表示されました!
チャネルのタイプ(今回はchat)、現在のキュー、コンタクトがキューに入ったタイムスタンプ、接続時間(自動更新はされないです)、転送されてきたコンタクトIDが反映されました。

下にあるContact Attributesは特に何も表示されませんでした。(別途コンタクトフローで指定をしたら見れるものと思われます)

最後に

サードパーティアプリケーションのワークショップをやってみました。
Webページを埋め込めるだけでなく、Amazon Connectの通話情報を動的に取得して表示できるのはよいですね。
よりカスタマイズ性が広がりそうです。
ワークショップだけでなく、実際に実装できないか調べてやってみます。

ではまた!コンサルティング部の洲崎でした。

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.